<template>
  <div v-if="userData">
    <!-- 我的卖家中心页 -->
    <!-- <router-link to="/login">登录</router-link> -->
    <div class="f1">
      <!-- <van-icon name="arrow-left" @click="$router.history.go(-1)" class="al" size="1.5rem" /> -->
      <h3>卖家中心</h3>
    </div>
    <div class="f2">
      <div class="container">
        <van-image
          v-lazy="`/${userData.avatar}`"
          class="avatar"
          round
          width="5rem"
          height="5rem"
          :src="`/${userData.avatar}`"
          @click="$router.push('/adminset')"
        />
        <div class="card">
          <div class="nickname">{{userData.user_name}}</div>
          <van-cell class="fenxiang" title="分享给朋友们" @click="showShare = true" />
          <van-share-sheet
            v-model="showShare"
            title="立即分享给好友"
            :options="options"
            @select="onSelect"
          />
        </div>
      </div>
    </div>
    <div class="f3">
      <div class="order">
        <van-icon name="orders-o" size="2rem" />
        <div class="word">全部</div>
      </div>
      <div class="order">
        <van-icon name="paid" size="2rem" />
        <div class="word">待付款</div>
      </div>
      <div class="order">
        <van-icon name="send-gift-o" size="2rem" />
        <div class="word">待发货</div>
      </div>
      <div class="order">
        <van-icon name="completed" size="2rem" />
        <div class="word">待收货</div>
      </div>
      <div class="order">
        <van-icon name="comment-o" size="2rem" />
        <div class="word">售后</div>
      </div>
    </div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#9a4145">
      <van-swipe-item v-for="(item, index) in list" :key="index">
        <img class="swipe-img" v-lazy="item" :src="item" alt="" />
      </van-swipe-item>
    </van-swipe>
    <div class="f4">
      <div class="left">
        <div class="mange">
          <van-icon
            name="apps-o"
            size="1.5rem"
            @click="$router.push('/commodity')"
          />
          <span><b>拍品管理</b></span>
          <van-icon
            name="arrow"
            size="0.8rem"
            @click="$router.push('/commodity')"
          />
        </div>
        <span class="sell-count">0</span>
        <span>单竞拍中</span>
      </div>
      <div class="right">
        <div class="money">
          <van-icon name="gold-coin-o" size="1.5rem" />
          <span><b>总资产</b></span>
          <van-icon name="closed-eye" @click="showMoney=!showMoney" size="1rem" class="eye"/>
          <van-icon name="arrow" size="0.8rem" />
        </div>
        <!-- 总资产 -->
        <div v-show="!showMoney" class="coin">*****</div>
        <div v-show="showMoney" class="coin">{{(userData.total).toFixed(2)}}元</div>
      </div>
    </div>
    <div class="f5">
      <b>店铺报表</b>
      <div class="report">
        <div class="part">
          <div class="num">0.00</div>
          <div>付款金额</div>
        </div>
        <div class="part">
          <div class="num">0</div>
          <div>付款笔数</div>
        </div>
        <div class="part">
          <div class="num">0</div>
          <div>今日访客</div>
        </div>
        <div class="part">
          <div class="num">0</div>
          <div>付款人数</div>
        </div>
      </div>
    </div>
    <div class="f6">
      <div class="parts">
        <van-icon name="envelop-o" size="2rem" />
        <div class="word1">群发消息</div>
      </div>
      <div class="parts">
        <van-icon
          name="home-o"
          size="2rem"
          @click="$router.push('/commodity')"
        />
        <div class="word1">拍品库</div>
      </div>
      <div class="parts">
        <van-icon
          name="user-o"
          size="2rem"
          @click="$router.push('/adminset')"
        />
        <div class="word1">账号管理</div>
      </div>
      <div class="parts">
        <van-icon name="other-pay" size="2rem" />
        <div class="word1">评价管理</div>
      </div>
      <div class="parts">
        <van-icon name="bullhorn-o" size="2rem" />
        <div class="word1">公告信息</div>
      </div>
    </div>
    <div class="f7">
      <div class="help">
        <van-icon name="phone-o" size="1.3rem" />
        <span>帮助中心</span>
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="f8">
      <div class="service">
        <van-icon name="friends-o" size="1.3rem" />
        <span>在线客服</span>
        <van-icon name="arrow" />
      </div>
    </div>
  </div>
</template>

<script>
import MeHeader from "@/components/Meheader.vue";
import { Toast } from "vant";

export default {
  components: { MeHeader },
  data() {
    return {
      showMoney:false, //是否显示总资产
      userData:null, //存储用户数据
      list: [
        "/img/swiper/sotheby1.jpg",
        "/img/swiper/sotheby2.jpg",
        "/img/swiper/sotheby3.jpg",
        "/img/swiper/sotheby4.jpg",
      ],
      userStare: "", //记录用户是否登录的状态
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
    };
  },
  methods: {
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    }
  },
  mounted() {
    let userMsg=JSON.parse(sessionStorage.getItem('user'))
    // 读取缓存数据，若缓存有数据 直接赋值
    if(userMsg) {
      this.userData=userMsg
      return
    }else{
      // 缓存sessionStorage中没有数据 发请求
      // 读取时，如果不存在this.userState会被赋值为null
      this.userStare = sessionStorage.getItem("token");
      if (this.userStare) {
        // 已登录状态
        const url = "api/users/info";
        this.axios.get(url, { headers: { usertoken: this.userStare } })
        .then((res) => {
          sessionStorage.setItem('user',JSON.stringify(res.data.info))
          this.userData=res.data.info
        })
      } 
    }
  },
};
</script>



<style lang="scss" scoped>
.f1 {
  position: fixed;
  top: 0;
  left: 0;right: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  background-color: #9a4145;
  .al {
    padding-top: 1.25rem;
    padding-left: 0.625rem;
  }
  h3 {
    // font-weight: bold;
    margin-top: 1rem;
    margin-bottom: .8rem;
    color: #fff;
    // margin-left: 7.8rem;
  }
}
.f2 {
  margin-top: 55px;
  margin-bottom: 1.25rem;

  .container {
    display: flex;

    .avatar {
      margin-top: 0rem;
      margin-left: 2.5rem;
    }
    .card {
      padding-top: 0.93rem;
      padding-left: 5rem;
      .nickname {
        padding-left: 1rem;
      }
      span {
        display: inline-block;
      }
    }
  }
}
.f3 {
  display: flex;
  margin-bottom: 1.25rem;

  .order {
    margin: auto;

    .word {
      font-size: 0.8rem;
      margin-top: 0.625rem;
    }
  }
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  width: 100%;
  height: 200px;
  text-align: center;
  /* background-color: #39a9ed; */
}

.swipe-img {
  width: 100%;
  height: 200px;
}
.f4 {
  display: flex;
  margin-bottom: 1.25rem;

  .left {
    margin: 1.25rem;

    .mange {
      margin-bottom: 1.25rem;
      span {
        margin-right: 3.125rem;
      }
    }
    .sell-count {
      font-weight: bold;
      font-size: 1.56rem;
      margin-left: 0rem;
      margin-right: 0.31rem;
    }
  }
  .right {
    margin: 1.25rem;
    .money {
      margin-bottom: 2rem;
      .eye {
        margin-right: 3.43rem;
      }
    }
    .coin {
      margin-left: 0rem;
    }
  }
}
.f5 {
  position: relative;
  margin-bottom: 1.25rem;

  b {
    margin-left: 1.25rem;
  }
  .report {
    display: flex;
    .part {
      margin: 2.5rem 1.43rem 1.25rem 1.43rem;
      .num {
        font-weight: bold;
      }
      :nth-child(2n) {
        padding-top: 0.625rem;
        font-size: 0.8rem;
      }
    }
  }
}
.f6 {
  display: flex;
  position: relative;
  margin-bottom: 2.5rem;

  .parts {
    margin-left: 1.56rem;
    .word1 {
      width: 3.75rem;
      margin-top: 0.625rem;
      margin-left: -0.5rem;
      font-size: 0.8rem;
    }
  }
}
.f7 {
  position: relative;
  height: 1.25rem;
  margin-bottom: 2.5rem;
  .help {
    position: absolute;
    left: 1.25rem;
    span {
      margin-left: 0.5rem;
      margin-right: 15rem;
      font-weight: bold;
    }
  }
}
.f8 {
  position: relative;
  height: 1.25rem;
  margin-bottom: 2.5rem;
  .service {
    position: absolute;
    left: 1.25rem;
    span {
      margin-left: 0.5rem;
      margin-right: 15rem;
      font-weight: bold;
    }
  }
}
</style>